<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>权限编辑</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
    <script type="text/javascript" src="/js/vue.js"></script>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/css/public.css"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .div {
            border: 2px solid green;
            width: 300px;
            height: 400px;
            background-color: #d7e0de;
            float: left;
            overflow: auto;
        }

        .divMid {
            width: 60px;
            height: 400px;
            text-align: center;
            float: left;

        }

        li {
            list-style-type: none;
        }
         i{
           font-size: 16px;
            position: relative;
            top: 30%;
             margin-bottom: 40px;
         }
    </style>
</head>
<body>

<div id='my'>
    <div>
<!--  <input id="text" type="text" v-model="roleName" placeholder="请输入角色名" value>-->

<!--   <button id="edit" class="layui-btn layui-btn-normal layui-btn-radius" @click="edit">搜索</button>-->
    </div>
    <!--    右侧div-->
    <div class="div divLeft">
        <div style="width: 100%;background-color: #938ade">
            <h3 style="text-align: center;color: white">已有权限</h3>
        </div>
        <ul style="margin-left: 10px">
            <li v-for="(data1,index) in dataLeft">
                <input :value="index" type="checkbox" v-model="check_val_left">
                {{(data1==undefined||data1==null)?"":data1.permissionName}}
            </li>
        </ul>
    </div>
    <!--    中间-->
    <div class="divMid">

        <i class="fa fa-arrow-left fa-3x" aria-hidden="false"
           style="color: #6377e0" @click="right_move() "></i>

        <i class="fa fa-arrow-right fa-3x" aria-hidden="false"
           style="color: #ef0419;" @click="left_move() "></i>


    </div>
    <!--    左侧div-->
    <div class="div divLeft">
        <div style="width: 100%;background-color: #938ade">
            <h3 style="text-align: center;color: white">未有权限</h3>
        </div>
        <ul v-if="show">
            <li v-for="(data2,index) in data_right">
                <input :value="index" type="checkbox" v-model="check_val_right">
                {{(data2==undefined||data2==null)?"":data2.permissionName}}
            </li>
        </ul>
    </div>

    <button id="btn" class="layui-btn layui-btn-normal layui-btn-radius"
            style="width:70px ;height: 40px;background-color: #01AAED;text-align: center"
            @click="btn">提交</button>

</div>

</body>

<script type="module">

    var qs = window.Qs;
    var vm =new Vue({
        el: '#my',
        data: {
            dataLeft: [],
            data_right: [],
            check_val_left: [],
            check_val_right: [],
            show: false,
            roleName:''
        },

        mounted(){
            var that = this;
            var name="";
            var test="";
            test =window.location.href.split("?roleName=")[1];
            name=decodeURI(test);
            this.roleName=name;

            axios({
                method: 'GET',
                url: "/rolePermission/select",
                params: {
                    roleName:this.roleName,
                }
            }).then(function (res) {
                that.dataLeft=[];
                if (res.data.success === "0") {
                    for (let i = 0; i < res.data.count; i++) {

                        that.dataLeft.push(res.data.data[i]);
                        console.log(res.data.data[i]);
                    }
                } else {
                    if (failure) {
                        failure(res.data)
                    } else {
                        window.alert('error: ' + JSON.stringify(res.data))
                    }
                };
                that.show = true
            });

            axios({
                method: 'GET',
                url: "/rolePermission/selectNo",
                params: {
                    roleName:name,
                }
            }).then(function (res) {
                if (res.data.success === "0") {
                    that.data_right=[];
                    for (let i = 0; i < res.data.count; i++) {
                        that.data_right.push(res.data.data[i]);
                        console.log(res.data.data[i]);
                    }
                } else {
                    if (failure) {
                        failure(res.data)
                    } else {
                        window.alert('error: ' + JSON.stringify(res.data))
                    }
                };
                that.show = true
            });
        },
        methods: {

            left_move: function () {
                //要把这个数组排序
                this.check_val_left.sort(sortNumber);
                this.check_val_left.forEach((item, index, array) => {
                    //执行代码
                    //console.log(item);
                    //将data_left对应索引的数据移动到右边去
                    this.data_right.push(this.dataLeft[item]);
                    //console.log(this.dataLeft);
                    this.dataLeft.splice(item, 1);
                });
                //忘记把这个数组置空了
                this.check_val_left = [];
            },
            right_move: function () {
                //console.log(this.check_val_right);
                this.check_val_right.sort(sortNumber);
                this.check_val_right.forEach((item, index, array) => {

                    this.dataLeft.push(this.data_right[item]);
                    //console.log(this.dataLeft);
                    this.data_right.splice(item, 1);
                });
                this.check_val_right = [];
            },

            btn:function() {
                var that = this;
                let params=[];
                for (let i = 0; i <that.dataLeft.length ; i++) {
                    params.push(that.dataLeft[i].sysRolePermission);
                }
                params =qs.stringify(params,{arrayFormat: 'brackets',allowDots: true });
                axios({
                        method: 'POST',
                        url: "/rolePermission/update",
                        params: {
                            sysRolePermissions:params
                        }
                    }
                ).then(function (res) {
                    if (res.data.success === "0") {
                        alert("修改成功");
                        location.href="table.html";
                    } else {
                        alert("修改失败");
                    }
                    ;
                })
                    .catch(function (err) {
                        let res = err.response
                        if (err) {
                            window.alert('发生未知错误！！！')
                        }
                    })
            }

        }
    })

</script>

<script >

    function sortNumber(a, b) {
        return b - a;
    }
</script>

</html>